<template>
  <div class="container tags">
    <el-card>
      <!-- 搜索栏 -->
      <el-row>
        <el-col :span="6">
          <el-form label-width="80px">
            <el-form-item label="标签名称">
              <el-input v-model="searchVal"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6" class="search_btn">
          <el-button @click="clearVal">清除</el-button>
          <el-button type="primary" plain @click="searchBtn">搜索</el-button>
        </el-col>
        <el-col :span="11" class="new_add">
          <el-button type="success" icon="el-icon-edit" @click="addSubject">新增学科</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form label-width="80px">
            <el-form-item label="状态">
              <el-select v-model="region" placeholder="请选择">
                <el-option label="已启用" value="1"></el-option>
                <el-option label="已禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

      <!-- 通知栏 -->
      <el-alert class="total_message" type="info" :closable="false">
        <i class="el-icon-info"></i>
        共{{ count }}条数据
      </el-alert>

      <!-- 表格 -->
      <el-table :data="tableList" style="width: 100%">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="subjectName" align="center" label="所属学科" width="100"> </el-table-column>
        <el-table-column prop="tagName" align="center" label="目录名称" width="200"> </el-table-column>
        <el-table-column prop="username" align="center" label="创建者" width="250"> </el-table-column>
        <el-table-column prop="addDate" align="center" label="创建日期" width="200"> </el-table-column>
        <el-table-column align="center" label="状态" width="180">
          <template slot-scope="scope">{{ scope.row.state === 0 ? '已禁用' : '已启用' }}</template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button class="begin" @click="changeState(scope.row)">{{ scope.row.state === 1 ? '禁用' : '启用' }}</el-button>
            <el-button :class="scope.row.state === 1 ? 'stop' : 'begin'" @click="edit(scope.row)">修改</el-button>
            <el-button :class="scope.row.state === 1 ? 'stop' : 'begin'" @click="remove(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-sizes="[10, 20]"
        :page-size="queryInfo.pagesize"
        layout="total, prev, pager, next, sizes, jumper"
        :total="count"
      >
      </el-pagination>
    </el-card>
    <tags-edit :editItem="editItem" :subjectList="subjectList" :visible.sync="isEditDialogShow"></tags-edit>

    <tags-add @refresh="refreshTable" :subjectList="subjectList" :visible.sync="isAddDialogShow"></tags-add>
  </div>
</template>

<script>
import { list, remove, changeState } from '@/api/hmmm/tags'
import TagsEdit from '../components/tags-edit'
import TagsAdd from '../components/tags-add'
import { simple } from '@/api/hmmm/subjects'

export default {
  name: 'tags',
  components: {
    TagsEdit,
    TagsAdd
  },
  data () {
    return {
      searchVal: '',
      region: '',
      count: 0,
      queryInfo: {
        page: 1,
        pagesize: 10
        // subjectID: 0,
        // tagName: '',
        // state: ''
      },
      tableList: [],
      isEditDialogShow: false,
      // 学科列表
      subjectList: [],
      // 修改的选项
      editItem: {},
      isAddDialogShow: false
    }
  },
  created () {
    this.getTableList()
  },
  methods: {
    clearVal () {
      this.searchVal = ''
      this.region = ''
      delete this.queryInfo.state
      // this.queryInfo.state = ''
      this.getTableList()
      // console.log(this.queryInfo)
    },
    async getTableList () {
      const res = await list(this.queryInfo)
      // console.log(res)
      res.data.items.forEach(item => {
        item.addDate = this.$dayjs(item.addDate).format('YYYY-MM-DD HH:mm:ss')
      })
      this.tableList = res.data.items
      this.count = res.data.counts
    },
    handleSizeChange (newPagesize) {
      this.queryInfo.pagesize = newPagesize
      this.getTableList()
    },
    handleCurrentChange (newPage) {
      this.queryInfo.page = newPage
      this.getTableList()
    },
    // 删除
    async remove (row) {
      // console.log(row)
      const resultConfirm = await this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (resultConfirm !== 'confirm') return this.$message.info('已取消删除!')
      const res = await remove(row)
      // console.log(res)
      if (res.status !== 200) return this.$message.warning('删除失败!')
      this.$message.success('删除成功!')
      this.getTableList()
    },
    // 修改
    async edit (row) {
      this.isEditDialogShow = true
      // console.log(row)
      // const res1 = await simple()
      // // console.log(res)
      // // this.subjectList = res.data.map(item => {
      // //   return item.label
      // // })
      // this.subjectList = res1.data

      this.getSubjectList()

      // const res = await detail(row)
      // console.log(res)
      // this.editItem = res.data
      this.editItem = row
    },
    // 添加
    addSubject () {
      this.isAddDialogShow = true
      this.getSubjectList()
    },
    // 获取学科列表
    async getSubjectList () {
      const res = await simple()
      this.subjectList = res.data
    },
    refreshTable () {
      this.getTableList()
    },
    // 搜索
    searchBtn () {
      // console.log(this.region)
      this.queryInfo.state = this.region
      this.getTableList()
    },
    // 更改状态
    async changeState (row) {
      row.state = row.state === 1 ? 0 : 1
      const res = await changeState(row)
      // console.log(res)
      if (res.status !== 200) return this.$message.warning('操作失败!')
      this.$message.success('操作成功!')
      this.getTableList()
    }
  }
}
</script>

<style scoped lang='less'>
.el-card {
  .search_btn {
    margin-left: 30px;
  }
  .new_add {
    text-align: right;
  }
  .el-alert {
    margin-bottom: 20px;
  }
  .el-table {
    margin-bottom: 20px;
    .el-button {
      border: none;
      background-color: unset;
      padding: 10px 3px;
    }
    .stop {
      color: #ccc;
    }
    .begin {
      color: #0094ff;
    }
  }
  .el-pagination {
    text-align: right;
  }
}
</style>
